<html>
  <head>
    <title>reactdemo</title>
    <script src="/static/react.js"></script>
    <script src="/static/react-dom.js"></script>
    <script src="/static/browser.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel">
        var Square=React.createClass({
            render:function(){
              var squareStyle={
                height:150,
                backgroundColor:this.props.color
            };
            return(
              <div style={squareStyle}>

              </div>
          );
        }
      });
        var Label=React.createClass({
            render:function(){
             var labelStyle={
                fontFamily:"sans-serif",
                fontWeight:"bold",
                padding:13,
                margin:0
            };
            return(
            <div style={labelStyle}>
              <p>{this.props.color}</p>
            </div>
          );
        }
      });
        var Card=React.createClass({
            render:function(){
                var cardStyle={
                height:200,
                width:150,
                backgroundColor:"#FFF",
                webkitFilter:"drop-shadow(0px 0px 5px #666)",
                filter:"drop-shadow(0px 0px 5px #666)"
            }
          return(
            <div style={cardStyle}>
                <Square color={this.props.color}/>
                <Label  color={this.props.color}/>
            </div>
          );
        }
      });
      var destination =document.querySelector("#container");
      ReactDOM.render(
        <div>
            <Card color="#FF6663"/>
        </div>,
      destination
      );
    </script>
  </body>
</html>
